<template>
  <Newhabit ref="popHabitRef" />
  <div class="allbox">
    <div class="herder">
      <van-nav-bar title="习惯管理" border="false">
        <template #left>
          <i class="iconfont icon-shangdian icons"></i>
        </template>
        <template #right>
          <van-icon @click="onClickRight" name="plus" size="23" color="#060606" />
        </template>
      </van-nav-bar>
    </div>
    
    <div class="content-wrap">
      <!-- 标签切换 -->
      <van-tabs sticky offset-top="45px" @click-tab="onClickTab" v-model:active="active" animated=" true"
        title-inactive-color="#5b5b5b" title-active-color="#ec645e" type="card" color="#f6f6f2">
        <van-tab title="全部">
          <!-- 删除滑块 -->
          <van-swipe-cell v-if="state.Allhabit.length" v-for="item in state.Allhabit" :key="item.id">
            <div class="box-topwrap" :style="{ background: item.color }">
              <div class="box-left">
                <i class="iconfont icons" :class="item.icon_class"></i>
                <span>{{ item.title }}</span>
                
              </div>
              <!-- <button class="btn-signIn">今日打卡</button> -->
              <div class="box-right">
                <span class="top">{{ item.timeId }}天</span>
                <p class="button">共计坚持</p>
              </div>
            </div>
            <template #right>
              <van-button @click="onDelete(item.id)" square type="danger" text="删除" class="delete" />
            </template>
          </van-swipe-cell>
          <p class="empty_p" v-else>当前时间还没添加习惯哦~</p>
          <div class="box-wrap" @click="onClickRight">
            <van-icon name="plus" size="18" color="#8d8d8d" />
            <span class="box-wrapspan">添加习惯</span>
          </div>
        </van-tab>
        <van-tab title="起床">
          <van-swipe-cell v-if="state.habitList.length" v-for="item in state.habitList" :key="state.habitList.id">
            <div class="box-topwrap" :style="{ background: item.color }">
              <div class="box-left">
                <i class="iconfont icons" :class="item.icon_class"></i>
                <span>{{ item.title }}</span>
              </div>
              <div class="box-right">
                <span class="top">{{ item.timeId }}天</span>
                <p class="button">共计坚持</p>
              </div>
            </div>
            <template #right>
              <van-button @click="onDelete(item.id)" square type="danger" text="删除" class="delete" />
            </template>
          </van-swipe-cell>
          <p v-else class="empty_p">当前时间还没添加习惯哦~</p>
          <div class="box-wrap" @click="onClickRight">
            <van-icon name="plus" size="18" color="#8d8d8d" />
            <span class="box-wrapspan">添加习惯</span>
          </div>
        </van-tab>
        <van-tab title="早晨">
          <van-swipe-cell v-if="state.habitList.length" v-for="item in state.habitList" :key="state.habitList.id">
            <div class="box-topwrap" :style="{ background: item.color }">
              <div class="box-left">
                <i class="iconfont icons" :class="item.icon_class"></i>
                <span>{{ item.title }}</span>
              </div>
              <div class="box-right">
                <span class="top">{{ item.timeId }}天</span>
                <p class="button">共计坚持</p>
              </div>
            </div>
            <template #right>
              <van-button @click="onDelete(item.id)" square type="danger" text="删除" class="delete" />
            </template>
          </van-swipe-cell>
          <p v-else class="empty_p">当前时间还没添加习惯哦~</p>
          <div class="box-wrap" @click="onClickRight">
            <van-icon name="plus" size="18" color="#8d8d8d" />
            <span class="box-wrapspan">添加习惯</span>
          </div>
        </van-tab>
        <van-tab title="中午">
          <van-swipe-cell v-if="state.habitList.length" v-for="item in state.habitList" :key="state.habitList.id">
            <div class="box-topwrap" :style="{ background: item.color }">
              <div class="box-left">
                <i class="iconfont icons" :class="item.icon_class"></i>
                <span>{{ item.title }}</span>
              </div>
              <div class="box-right">
                <span class="top">{{ item.timeId }}天</span>
                <p class="button">共计坚持</p>
              </div>
            </div>
            <template #right>
              <van-button @click="onDelete(item.id)" square type="danger" text="删除" class="delete" />
            </template>
          </van-swipe-cell>
          <p v-else class="empty_p">当前时间还没添加习惯哦~</p>
          <div class="box-wrap" @click="onClickRight">
            <van-icon name="plus" size="18" color="#8d8d8d" />
            <span class="box-wrapspan">添加习惯</span>
          </div>
        </van-tab>
        <van-tab title="下午">
          <van-swipe-cell v-if="state.habitList.length" v-for="item in state.habitList" :key="state.habitList.id">
            <div class="box-topwrap" :style="{ background: item.color }">
              <div class="box-left">
                <i class="iconfont icons" :class="item.icon_class"></i>
                <span>{{ item.title }}</span>
              </div>
              <div class="box-right">
                <span class="top">{{ item.timeId }}天</span>
                <p class="button">共计坚持</p>
              </div>
            </div>
            <template #right>
              <van-button @click="onDelete(item.id)" square type="danger" text="删除" class="delete" />
            </template>
          </van-swipe-cell>
          <p v-else class="empty_p">当前时间还没添加习惯哦~</p>
          <div class="box-wrap" @click="onClickRight">
            <van-icon name="plus" size="18" color="#8d8d8d" />
            <span class="box-wrapspan">添加习惯</span>
          </div>
        </van-tab>
        <van-tab title="晚上">
          <van-swipe-cell v-if="state.habitList.length" v-for="item in state.habitList" :key="state.habitList.id">
            <div class="box-topwrap" :style="{ background: item.color }">
              <div class="box-left">
                <i class="iconfont icons" :class="item.icon_class"></i>
                <span>{{ item.title }}</span>
              </div>
              <div class="box-right">
                <span class="top">{{ item.timeId }}天</span>
                <p class="button">共计坚持</p>
              </div>
            </div>
            <template #right>
              <van-button @click="onDelete(item.id)" square type="danger" text="删除" class="delete" />
            </template>
          </van-swipe-cell>
          <p v-else class="empty_p">当前时间还没添加习惯哦~</p>
          <div class="box-wrap" @click="onClickRight">
            <van-icon name="plus" size="18" color="#8d8d8d" />
            <span class="box-wrapspan">添加习惯</span>
          </div>
        </van-tab>
        <van-tab title="睡前">
          <van-swipe-cell v-if="state.habitList.length" v-for="item in state.habitList" :key="state.habitList.id">
            <div class="box-topwrap" :style="{ background: item.color }">
              <div class="box-left">
                <i class="iconfont icons" :class="item.icon_class"></i>
                <span>{{ item.title }}</span>
              </div>
              <div class="box-right">
                <span class="top">{{ item.timeId }}天</span>
                <p class="button">共计坚持</p>
              </div>
            </div>
            <template #right>
              <van-button @click="onDelete(item.id)" square type="danger" text="删除" class="delete" />
            </template>
          </van-swipe-cell>
          <p v-else class="empty_p">当前时间还没添加习惯哦~</p>
          <div class="box-wrap" @click="onClickRight">
            <van-icon name="plus" size="18" color="#8d8d8d" />
            <span class="box-wrapspan">添加习惯</span>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script setup>
import Newhabit from "@/components/Newhabit.vue";
import { reactive, ref } from "vue";
import axios from "@/api";
import { onMounted } from "vue";
import { showConfirmDialog, showToast } from 'vant';


const popHabitRef = ref(null)

const state = reactive({
  Allhabit: [],
  habitList: [],
})


const onClickRight = () => {
  popHabitRef.value.show = true
}

//删除习惯
const onDelete = (id) =>{
  showConfirmDialog({
  title: '确定删除吗？',
})
  .then(async() => {
    // on confirm
    const  data  = await axios.post('/habit/deleteHabit', {
    id: id
  })
  showToast('删除成功');
  console.log(data);
  })
  .catch(() => {
    // on cancel
  });
  
  
  
}

//全部习惯
onMounted(async () => {
  const result = await axios.post('/habit/findAllHabit', {
    data: ''
  })
  //console.log(result);
  state.Allhabit = result.data
  //console.log(result.data);
})

// 点击习惯标签过滤出相应的习惯
const onClickTab = async (tab) => {
  const data = state.Allhabit.filter((item) => item.habit_lable === tab.title)
  state.habitList = data
  //console.log(state.habitList);

  //按照habit_lable查找习惯
  // const { data } = await axios.post('/habit/findHabitByType', {
  //   habit_lable: tab.title
  // })
  // state.habitList = data
}





</script>

<style lang="less" scoped>
.allbox {
  padding-bottom: 50px;
  .herder {
    height: 46px;
    .icons {
      font-size: 26px;
    }
  }

  .content-wrap {
    height: 100%;
    margin: 0px 10px;
    overflow-y: auto;

    .box-topwrap {
      height: 60px;
      background-color: #aca9cd;
      border-radius: 10px;
      margin: 5px 5px;
      display: flex;
      
      .box-left {
        height: 100%;
        width: 260px;
        display: flex;
        align-items: center;
        
        .icons {
          margin: 15px 0px 15px 10px;
          font-size: 30px;
        }
        span {
          margin: 10px 5px;
          margin-top: 10px;
          font-size: 18px;
        }
        
      }
      .btn-signIn{
          font-size: 14px;
          height: 50px;
          width: 50px;
          border-radius: 50%;
          border: none;
          margin-top: 5px;
          background-color: #fc5531;
          color: #ffffff;
          box-shadow: 0 0 5px;
        }
      .box-right {
        height: 100%;
        width: 100px;
        flex: 1;
        text-align: right;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-right: 20px;


        .top {
          margin-left: 5px;
          font-size: 22px;
          font-weight: bold;
        }

        .button {
          margin-top: 10px;
          font-size: 10px;
          color: #3d3d40;
        }
      }
    }

    .delete {
      height: 60px;
      border-radius: 10px;
    }

    .empty_p {
      margin: 20px;
      text-align: center;
      font-size: 12px;
      color: #8d8d8d;
    }

    .box-wrap {
      height: 60px;
      background-color: #f6f6f2;
      border-radius: 10px;
      margin: 5px;
      text-align: center;

      .box-wrapspan {
        margin-left: 5px;
        color: #8d8d8d;
        line-height: 60px;
        font-size: 16px;
      }
    }
  }
}

.cell {
  margin: 0;
  padding: 0;
}
</style>

<style>
.van-nav-bar__content {
  position: fixed;
  width: 100%;
}

.van-tabs__nav--card {
  border: none;
  margin: 0;
}

.van-tab--grow {
  border-radius: 20px;
}

.van-tab--card {
  border-right: none;
}

</style>